<template>
	<view class="daka-next">
		<view class="topwrap">
			<view class="title">
				打卡主题：今日暂无打卡主题
			</view>
		</view>
		<view class="i-content">
			<view class="i-wrap">
				<textarea v-model="desc" :cursor-spacing="20" :show-confirm-bar="false" class="i-textarea"/>
			</view>
			<view class="i-action">
				<view class="i-icon-wrap">
					<view v-if="imgurl" class="i-icons" slot="main">
						<view class="i-delete" @click="fnDeleteSource(1)">X</view>
						<image class="img" :src="imgurl"></image>
					</view>
					<imgselect v-else @input="fnImgSelect">
						<view class="i-icons" slot="main">
							<vs-icon type="icon-tupian1" size="30"></vs-icon>
						</view>
					</imgselect>
					<view v-if="videourl"  class="i-icons">
						<view class="i-delete" @click="fnDeleteSource(2)">X</view>
						<video class="video" objectFit="fill"  play-btn-position="center" :show-fullscreen-btn="false"></video>
					</view>
					<view v-else class="i-icons" @click="fnGetCameraVideo">
						<vs-icon type="icon-xiangji" size="30"></vs-icon>
					</view>
				</view>
			</view>
			<view class="i-action" style="padding: 0;">
				<view class="i-left" @click="fnGetlocation">
					<vs-icon type="icon-weizhi" size="20" margin="5"></vs-icon>
					<view class="i-address">
						{{address==''?'所在位置':address}}
					</view>
					<view style="float: right;" >
						<vs-icon type="icon-youjiantou" size="16" color="#8a8a8a" margin="5"></vs-icon>
					</view>
				</view>
			</view>
			<view class="i-action" style="padding: 0;">
				<view class="i-left" @click="showActionSheet=true">
					<vs-icon v-if="type==1" type="icon-caozuo-suoguan" size="20" margin="5"></vs-icon>
					<vs-icon v-if="type==0" type="icon-hekriconsuokai" size="20" margin="5"></vs-icon>
					{{type==0?'公开':'私密'}}
					<view class="i-right">
						{{type==0?'所有人可见':'管理员和作者可见'}}
						<vs-icon type="icon-youjiantou" size="16" color="#8a8a8a" margin="5"></vs-icon>
					</view>
				</view>
			</view>
		</view>
		<vs-cssloading :show="loadingshow"></vs-cssloading>
		<view class="btn-bottom-wrap">
			<view class="i-btn">
				<vs-button @click="fnSaveInfo"></vs-button>
			</view>
		</view>
		<!-- <tui-actionsheet 
		:show="showActionSheet" :tips="tips" :item-list="itemList" 
		:mask-closable="maskClosable" :color="color" :size="size" 
		:is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet">
		</tui-actionsheet> -->
		<actionSheet 
		:maskclosable="true"  :is-cancel="true" size="26"
		:itemList="sheetlist" tips="选择操作"
		:show="showActionSheet" 
		@click="itemClick"
		@cancel="showActionSheet=false">
		</actionSheet>
	</view>
</template>

<script>
	import imgselect from '../../compoments/img-select.vue'
	import actionSheet from "@/components/actionsheet/actionsheet.vue"
	export default {
		components:{
			imgselect,actionSheet
			
		},
		data() {
			return {
				loadingshow:false,
				address:'',
				type:0,
				wkid:'',
				imgurl:'',
				videourl:'',
				desc:'',
				classInfo:'',
				studentInfo:'',
				saveinfo:{
					imgurl:'',
					videourl:''
				},
				showActionSheet:false,
				sheetlist:[
					{
						text:'所有人可见',
						type:0
					},
					{
						text:'管理员和作者可见',
						type:1
					}
				]
			}
		},
		onShow() {
			console.log(this.$store.state.studentInfo)
			this.classInfo=this.$store.state.classInfo
			this.studentInfo=this.$store.state.studentInfo
		},
		methods: {
			fnImgSelect(data){
				this.imgurl=data[data.length-1]
			},
			fnGetCameraVideo(){
				let that=this
				uni.chooseVideo({
					count: 1,
					compressed:true,
					maxDuration:60,
					sourceType: ['camera'],
					success: function (res) {
						console.log(res.tempFilePath)
						that.videourl=res.tempFilePath
						uni.saveVideoToPhotosAlbum({ 
							filePath: res.tempFilePath,
							success: function (e) {
								   console.log(e);
							   },
							fail:(err)=>{
								console.log(err)
								
							}
						   });
					},
					fail: (err) => {
						console.log(err)
					}
				});
			
			
			},
			fnUploadfile(file,type){
				let that=this
				return new Promise(resolve=>{
					uni.uploadFile({
						url:that.$http + 'php/xcx_uploadvideo.php', //仅为示例，非真实的接口地址
						filePath: file,
						name: 'file',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
						},
						formData: {
							'userid': uni.getStorageSync('userInfo').userid
						},
						success: (res) => {
							console.log(res);
							that.saveinfo[type]=res.data
							resolve(res)
						}
					});
				})
			},
			fnSaveInfo(){
				// this.$refs.popup.open()
				//console.log(this.imgurl)
				if(!uni.getStorageSync('userInfo')){
					uni.navigateTo({
						url:'../../mylogin/mylogin'
					})
					return;
				}
				
				if(this.imgurl==''&&this.videourl==''){
					this.$fun.toast('至少选择一张图片或视频！')
					return;
				}
				let arr=[]
				if(this.videourl!=''){
					arr.push(this.fnUploadfile(this.videourl,'videourl'))
				}
				if(this.imgurl!=''){
					arr.push(this.fnUploadfile(this.imgurl,'imgurl'))
				}
				Promise.all(arr).then((res)=>{
					console.log(res)
					this.fnSaveInfoNext()
				})
			},
			fnSaveInfoNext(){
				this.loadingshow=true
				console.log(this.saveinfo)
				console.log(uni.getStorageSync('userInfo'))
				let params={
					wkid:this.classInfo.wk_id,
					desc:this.desc,
					urls:JSON.stringify(this.saveinfo),
					userid:uni.getStorageSync('userInfo').userid,
					nickname:uni.getStorageSync('userInfo').nickname,
					headimg:uni.getStorageSync('userInfo').avatarurl,
					videotype:this.type,
					address:this.address,
					stu_id:this.$store.state.studentInfo.stu_id,
					stu_name:this.$store.state.studentInfo.stu_name
				}
				console.log(params)
				this.$fun.request(params,'php/xcx_savevideoinfo.php').then((res)=>{
					console.log(res)
					setTimeout(()=>{
						this.loadingshow=false
					},1000)
					if(res.data.status==200){
						uni.navigateBack({
							delta:1
						})
					}else{
						this.loadingshow=false
						this.$fun.toast('出现错误，上传失败！')
					}
					
				})
				
				
			},
			fnDeleteSource(type){
				switch(type){
					case 1:
						this.imgurl=''
					break;
					case 2:
						this.videourl=''
					break;
				}
				
			},
			itemClick(data){
				console.log(data.index)
				this.type=data.index
				this.showActionSheet=false
			},
			fnGetlocation(){
				let that=this
				uni.chooseLocation({
				    success: function (res) {
				        console.log(res)
						that.address=res.name
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.daka-next{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.topwrap{
			width: 100%;
			height: 120px;
			background-image: linear-gradient(#ffb84d,#ff9900);
			
			.title{
				//background-color: #007AFF;
				width: 90%;
				font-size: 16px;
				color: #fff;
				margin: 0 auto;
				margin-top: 10px;
			}
		}
		.i-content{
			width: 90%;
		//	height: 100%;
			display: flex;
			//flex: 1;
			flex-direction: column;
			padding-top: 30px;
			//background-color: #81d3ff;
			.i-wrap{
				width: 100%;
				display: flex;
				//background-color: #a9ff58;
				.i-textarea{
					width: 100%;
					height: 120px;
					//height: 5px;
					padding:10px;
					font-size: 16px;
					color: $vx-fontcolor-2;
					//background-color: #585a48;
					border-radius: 4px;
					border: 1px dashed #f0f0f0;
				}
			}
			.i-padding{
				padding: 0;
			}
			.i-action{
				width: 100%;
				//height: 50px;
				//background: #4CD964;
				//margin: 5px 0;
				padding: 15px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 1px solid #eee;
				
				.i-left{
					width: 100%;
					height: 100%;
					padding: 15px 0;
					display: flex;
					align-items: center;
					//background-color: #007AFF;
					&:active{
						background-color: #f6f6f6;
					}
					.i-address{
						flex: 1;
						padding-right: 20%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.i-right{
						display: flex;
						flex: 1;
						//background: #15BB31;
						justify-content: flex-end;
						align-items: center;
						font-size: 16px;
						color: #9a9a9a;
					}
				}
				.i-icon-wrap{
					width: 65%;
					display: flex;
					justify-content: space-between;
					//background-color: #007AFF;
					.i-icons{
						width: 80px;
						height: 80px;
						position: relative;
						//background-color: #3F536E;
						border-radius: 4px;
					//	font-size: 30px;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid #C0C0C0;
						color: #C0C0C0;
						//margin-right: 20px;
						.i-delete{
							width: 20px;
							height: 20px;
							background: red;
							position: absolute;
							right: -10px;
							top: -10px;
							border-radius: 100%;
							display: flex;
							font-size: 12px;
							color: #fff;
							justify-content: center;
							line-height: 20px;
							z-index: 10;
						}
						.img{
							width: 100%;
							height: 100%;
						}
						.video{
							width: 100%;
							height: 100%;
						}
					}
					.i-m{
						margin-right: 20px;
					}
					
				}
			}
			
		}
		.btn-bottom-wrap{
			width: 100%;
			height: 55px;
			position: fixed;
			bottom: 0;
			margin-top: 30px;
			background: #fff;
			display: flex;
			justify-content: center;
			.i-btn{
				width: 90%;
				height: 45px;
				border-radius: 4px;
			}
		}
	}

</style>
